<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>主页_陈恢严个人博客</title>
  <meta content="博客,个人博客,陈陈陈,陈恢严,恢严,陈恢严个人博客,陈陈陈个人博客" name="keywords" />
  <meta content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" name="description" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <link href="/asset/images/favicon.ico" rel="icon" type="image/x-icon">
  <link href="/asset/css/base.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <link href="/asset/css/loading.css" rel="stylesheet">
  <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
  <script src="/asset/js/comm.js" type="text/javascript"></script>
  <script src="/asset/layui/layui.js" type="text/javascript"></script>
  <script src="/asset/js/vue.min.js" type="text/javascript"></script>
  <!--[if lt IE 9]>
  <script src="/asset/js/modernizr.js"></script>
  <![endif]-->

    <!-- 图片预览插件start -->
    <link rel="stylesheet" href="/asset/previewPhoto/index.css">
    <script type="text/javascript" src="/asset/previewPhoto/preview-photo.js"></script>
    <script type="text/javascript" src="/asset/previewPhoto/index.js"></script>
    <!-- 图片预览插件end -->

  <style>
    nav ul li a[href='/index']{color: #f7ffb4; /*background: #176c86;*/
      background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -webkit-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -moz-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -ms-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: -o-radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #2e3768);
      background: radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -webkit-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -moz-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -ms-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
      background: -o-radial-gradient(220% 105% at top center, #2e3768 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    }
    .tags a:hover{ color: #fff;}
  </style>
</head>
<body>
<div class="box-bg">
  <div class="stars"></div>  <!--背景层，不要删除，不然没有作用-->
</div>
  <div id="indexVue">
    <header>
      <div class="profile">
        <div class="avatar fl"><img src="/asset/images/avatar.jpg"></div>
        <div class="guanzhu fl">
          <ul>
            <li><img src="/asset/images/nianling.png"><span>生日：1997-01-26</span></li>
            <li><img src="/asset/images/weizhi.png"><span>中国·广东·湛江</span></li>
            <li><img src="/asset/images/qq.png"><span>QQ：879532354</span></li>
            <li><img src="/asset/images/weixin.png"><span><img src="/asset/images/wx.jpg"></span></li>
          </ul>
        </div>

        <!-- 加载提示start -->
        <div class="loading-div" v-if="!isLoad_1">
          <div class="loader">
            <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
          </div>
        </div>
        <!-- 加载提示end -->

        <!-- 标题 -->
        <div class="username" v-html="logoTitle.content"></div>
      </div>

      <!-- 菜单start -->
      <nav>
        <ul id="starlist">
          <li :key="item.id" v-for="(item, index) in sysMenuList">
            <a v-if="item.href != '/blogSpace'" v-bind:href="item.href" v-text="item.name"></a>
            <a v-if="item.href == '/blogSpace'" href="javascript:void(0)" onclick="window.parent.location.href  = '/blogSpace';" v-text="item.name"></a>
          </li>
        </ul>
      </nav>
      <!-- 菜单end -->
    </header>
    <article>
      <main class="r_box">

        <!-- 个人介绍start -->
        <div class="blogbox">
          <ul>
            <li> <i class="feed-avatar"><img src="/asset/images/avatar.jpg"></i>
              <h2><a href="/aboutMe" v-text="indexAboutMe.title"></a></h2>
              <p class="feed-info" v-html="indexAboutMe.content"></p>
              <span class="feed-img">
                <a href="javascript:void(0)" v-if="isLoad_1">
                 <img v-for="(item, index) in boIndexImageList" :key="item.id" v-bind:src="'/index_image/' + item.thumUrl" v-bind:data-preview-src="'/index_image/' + item.thumUrl">
                </a>
                <a href="javascript:void(0)" v-if="!isLoad_1">
                  <img v-for="(item, index) in boIndexImageList" :key="item.id" src="/asset/images/yuantu.jpg">
                </a>
              </span>
<!--              <p class="feed-date">-->
<!--                <span class="fd01">关于我</span>-->
<!--                <span class="fd01"><a href="/">2018-08-24</a></span>-->
<!--                <span class="fd01">阅读（90）</span>-->
<!--                <span class="fd01">喜欢（90）</span>-->
<!--              </p>-->
            </li>
          </ul>
        </div>
        <!-- 个人介绍end -->

        <div class="bloglist">

          <!-- 文章start -->
          <li v-for="(item, index) in articleList" :key="item.id">
            <i>
              <a href="javascript:void(0)" v-if="isLoad_2">
                <img v-bind:src="'/article_image/' + item.img">
              </a>
              <a href="javascript:void(0)" v-if="!isLoad_2">
                <img src="/asset/images/yuantu.jpg">
              </a>
            </i>
            <h3>
              <span class="layui-badge" v-if="item.isTop == '1'" v-text="item.isTopName"></span>
              <a v-bind:href="'/myArticle/articleInfo?articleId=' + item.id" v-bind:title="item.title" v-text="item.title"></a>
            </h3>
              <div class="tags">
                  <a href="javascript:void(0)"  v-for="(boTag, i) in item.boTagList" :key="boTag.id" v-text="boTag.name" v-bind:style="'background-color:' + boTag.color"></a>
              </div>
            <p class="article_content" v-text="item.remark"></p>
            <p class="feed-date">
              <span class="fd01" v-text="item.userName">xxx</span>
              <span class="fd01" v-text="item.createDateValue">yyyy-MM-dd</span>
              <span class="fd01" v-text="'阅读（' + item.readNum + '）'">阅读（0）</span>
              <span class="fd01" v-text="'喜欢（' + item.praiseNum + '）'">喜欢（0）</span>
            </p>
          </li>
          <!-- 文章end -->

          <!-- 加载提示start -->
          <div class="loading-div" v-if="!isLoad_2">
            <div class="loader">
              <div>正</div><div>在</div><div>努</div><div>力</div><div>加</div><div>载</div><div>中</div><div></div><div></div><div></div>
            </div>
          </div>
          <!-- 加载提示end -->

          <!-- 分页 -->
          <div class="pagelist pagebg" id="pageContent"></div>

        </div>
      </main>
      <aside class="l_box">
        <div class="wdxc">
          <h2>我的相册</h2>
          <ul>
            <li :key="item.id" v-for="(item, index) in boPhotoAlbumList">
              <a v-bind:href="'/myAlbum/photo?albumId=' + item.id" v-if="isLoad_1" v-bind:title="item.name">
                <img v-bind:src="'/photo_album_img/' + item.img">
              </a>
              <a href="javascript:void(0)" v-if="!isLoad_1">
                <img src="/asset/images/yuantu.jpg">
              </a>
            </li>
          </ul>
        </div>
        <div class="search">
          <form action="" id="searchform" method="post" name="searchform">
            <input class="input_text" v-model="searchFrom.title" style="color: rgb(153, 153, 153);" type="text" placeholder="请输入关键字词">
            <input class="input_submit" v-on:click="clickSearchBtn" type="button" value="搜索">
          </form>
        </div>
        <div class="fenlei">
          <h2>标签云</h2>
          <ul>
            <li :key="item.id" v-for="(item, index) in boTagList">
              <a href="javascript:void(0)" v-on:click="clickTagBtn(item.id)" v-bind:style="'background-color:' + item.color" v-text="item.name + '(' + item.articleNum + ')'"></a>
            </li>
          </ul>
        </div>
        <div class="tuijian">
          <h2>站长推荐</h2>
          <ul>
            <li :key="item.id" v-for="(item, index) in boArticleTopList">
              <a v-bind:href="'/myArticle/articleInfo?articleId=' + item.id" v-bind:title="item.title" v-text="item.title"></a>
            </li>
          </ul>
        </div>
        <div class="tuijian">
          <h2>点击排行</h2>
          <ul>
            <li :key="item.id" v-for="(item, index) in articleClickList">
              <a v-bind:href="'/myArticle/articleInfo?articleId=' + item.id" v-bind:title="item.title" v-text="item.title"></a>
            </li>
          </ul>
        </div>
        <div class="links">
          <h2>友情链接</h2>
          <ul>
            <li v-html="friendshipUrl.content"></li>
          </ul>
        </div>
      </aside>
    </article>
    <div class="blank"></div>
    <footer>
      <p v-html="indexFooter.content"></p>
    </footer>
    <a class="cd-top" href="#">Top</a>
  </div>
</body>
<script type="text/javascript">

  //自动推送,页面URL将立即被推送给百度
  (function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
      bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();

  //初始化layui模块
  layui.use('layer', function(){
    var layer = layui.layer;
  });

  var indexVue = new Vue({
    el: '#indexVue',
    data: function () {
      return {
        serverUrl: 'http://blog-my.com', //服务器地址（临时开发用）
        isLoad_1: false, //请求1完成标记
        isLoad_2: false, //请求2完成标记
        sysMenuList: [], //导航
        logoTitle: [], //LOGO标题
        indexAboutMe: [], //关于我
        indexFooter: [], //页脚
        friendshipUrl: 10, //友情连接
        boPhotoAlbumList: 6, //我的相册
        boTagList: 10, //文章标签
        boArticleTopList: 10, //站长推荐文章
        articleClickList: 10, //点击排行
        articleList: 15, //文章
        boIndexImageList: 5, //首页展示照片
        count: 0, //文章总数
        curr: 1, //页数
        limit: 8, //每页条数
        searchFrom: {
          title: '',
          tagId: ''
        }
      }
    },
    created: function () {
      const me = this;
      me.$nextTick(function () {
        me.getArticleList(me.curr, me.limit);
        me.getIndexData();
      });
    },
    methods: {
      //初始化基本信息
      getIndexData: function(){
        const me = this;
        $.ajax({
          type: 'POST',
          url: '/index/getIndexData',
          // async:false, //同步
          data: {},
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.sysMenuList = data.sysMenuList;
              me.logoTitle = data.logoTitle;
              me.indexAboutMe = data.indexAboutMe;
              me.indexFooter = data.indexFooter;
              me.friendshipUrl = data.friendshipUrl;
              me.boPhotoAlbumList = data.boPhotoAlbumList;
              me.boTagList = data.boTagList;
              me.boArticleTopList = data.boArticleTopList;
              me.articleClickList = data.articleClickList;
              me.boIndexImageList = data.boIndexImageList;
              me.isLoad_1 = true;

              // 2秒后初始化图片预览
              setTimeout(function(){
                window.PreviewPhoto({ imageContainerType: (IsPC() ? 2 : 1) });
              }, 2000);

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //初始化文章信息
      getArticleList: function(curr, limit){
        const me = this;
        me.isLoad_2 = false;
        $.ajax({
          type: 'POST',
          url: '/index/getArticleList',
          data: {
            page: curr,
            limit: limit,
            title: me.searchFrom.title,
            tagId: me.searchFrom.tagId
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.articleList = data.articleList;
              me.count = data.count;

              me.initPage(); //初始化分页

              me.isLoad_2 = true;

              $('main').css('min-height', $('aside').css('height')); //文章区域最小高度等则边栏的高度

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //点击搜索按钮
      clickSearchBtn: function(){
        const me = this;
        me.curr = 1; //初始化页数
        me.searchFrom.tagId = '';
        me.getArticleList(me.curr, me.limit);
      },

      //点击标签
      clickTagBtn: function(tagId){
        const me = this;
        me.curr = 1; //初始化页数
        me.searchFrom.title = '';
        me.searchFrom.tagId = tagId;
        me.getArticleList(me.curr, me.limit);
      },

      //分页
      initPage: function(){
        const me = this;
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'pageContent' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: me.count //数据总数，从服务端得到
            ,limit: me.limit //每页条数
            ,curr: me.curr //页数
            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
              //首次不执行
              if(!first){
                me.curr = obj.curr;
                me.getArticleList(obj.curr, obj.limit);
              }
            }
          });
        });
      }
    }
  });

  //监听手机端图片预览iframe,进行设置图片宽高
  function resize(obj){
    var ifrm = obj.contentWindow.document.getElementsByTagName("img");
    var body = obj.contentWindow.document.getElementsByTagName("body");
    ifrm[0].style.cssText = "max-width:" + obj.style.width + ";max-height:" + obj.style.height + ";";
    body[0].style.cssText = "margin: 0px;text-align:center;";
  }
</script>
</html>
